import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:get/get_utils/get_utils.dart';
import 'package:yysk_app/model/common_model/notice_list_model.dart';
import 'package:yysk_app/utils/colors.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/utils/js_tool.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';

class VerticalScrollNoticeBar extends StatefulWidget {
  final List<NoticeListItem> messages;
  final Duration interval;
  final void Function(dynamic)? onPressed;
  final VoidCallback onPressedRight;
  final double boxWidth;
  final bool showBoxLeftIcon;
  final bool showBoxRightIcon;
  final bool showBoxBorder;
  final bool showBoxRadius;
  const VerticalScrollNoticeBar({
    super.key,
    required this.messages,
    this.interval = const Duration(seconds: 5),
    required this.onPressed,
    this.boxWidth = 250,
    this.showBoxLeftIcon = true,
    this.showBoxRightIcon = false,
    this.showBoxBorder = true,
    this.showBoxRadius = false,
    required this.onPressedRight,
  });

  @override
  // ignore: library_private_types_in_public_api
  _VerticalScrollNoticeBarState createState() =>
      _VerticalScrollNoticeBarState();
}

class _VerticalScrollNoticeBarState extends State<VerticalScrollNoticeBar> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius:
            widget.showBoxRadius
                ? BorderRadius.circular(40.px)
                : BorderRadius.circular(4.px.px),
        // color: AppColors.endColor,
        // color:
        //     widget.showBoxBorder ? const Color.fromARGB(26, 26, 26, 1) : null,
        border:
            widget.showBoxBorder
                ? Border.all(
                  color: AppColors.backgroundColorBlack,
                  width: 1.px,
                )
                : null,
      ),
      child: Stack(
        children: [
          // _background(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              widget.showBoxLeftIcon
                  ? Container(
                    width: 20.px,
                    height: 41.px,
                    // color: Colors.amber,
                    margin: EdgeInsets.only(left: 0.px),
                    child: Center(
                      child: ImageAssetWidget(imageUrl: 'static/images/notice.png',width: 18.px,height: 
                        18.px,),
                    ),
                  )
                  : Container(width: 74.px),
              Obx(
                () => Expanded(
                  child: SizedBox(
                    height: 41.px,
                    child: Center(
                      child: SizedBox(
                        width: context.width,
                        height: 41.px,
                        child: CarouselSlider(
                          options: CarouselOptions(
                            aspectRatio: 16 / 9,
                            viewportFraction: 1,
                            initialPage: 0,
                            enableInfiniteScroll: true,
                            reverse: false,
                            autoPlay: true,
                            autoPlayInterval: Duration(seconds: 3),
                            autoPlayAnimationDuration: Duration(
                              milliseconds: 800,
                            ),
                            autoPlayCurve: Curves.linear,
                            enlargeCenterPage: true,
                            enlargeFactor: 0.3,
                            scrollDirection: Axis.vertical,
                          ),
                          items:
                              widget.messages.map((i) {
                                return Builder(
                                  builder: (BuildContext context) {
                                    return GestureDetector(
                                      onTap: () {
                                        widget.onPressed?.call(i);
                                      },
                                      child: Container(
                                        width: widget.boxWidth.px,
                                        margin: const EdgeInsets.symmetric(
                                          horizontal: 5.0,
                                        ),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          children: [
                                            SizedBox(
                                              width: widget.boxWidth.px - 10.px,
                                              child: Text(
                                                '${i.title}',
                                                textAlign: TextAlign.left,
                                                style: TextStyle(
                                                  fontSize: 14.px,
                                                  color:
                                                      AppColors.backgroundColorGrey,
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                ),
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    );
                                  },
                                );
                              }).toList(),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              widget.showBoxLeftIcon
                  ? GestureDetector(
                    onTap: () {
                      widget.onPressedRight();
                    },
                    child: Container(
                      // color: Colors.amberAccent,
                      width: 20.px,
                      height: 41.px,
                      margin: EdgeInsets.only(right: 12.px),
                      child: Center(
                        child:  ImageAssetWidget(imageUrl: 'static/images/more.png',width: 18.px,height: 
                        18.px,),
                      ),
                    ),
                  )
                  : Container(width: 20.px),
            ],
          ),
        ],
      ),
    );
  }
}

_background() {
  return Positioned.fill(
    child: Image.asset('static/images/noticeBar.png', fit: BoxFit.cover),
  );
}
